<template>
    <div class="content">
      <div
        ref="charts"
        style="width: 1200px; height: 1000px;margin:0 auto"
      ></div>
    </div>
  </template>
  
  
<script>
  import * as echarts from 'echarts'
// -导入的外部 地图文件  下载地址 https://www.isqqw.com/
import china from '@/assets/china.json'
export default {
    data() {
        return {
            points: [ // 散点图数据
          { name: '新疆', value: [87.628579, 43.793301], itemStyle: { color: '#00EEFF' } }, // 新疆
          { name: '四川', value: [104.076452, 30.651696], itemStyle: { color: '#00EEFF' } }, // 四川
          { name: '甘肃', value: [103.826777, 36.060634], itemStyle: { color: '#00EEFF' } }, // 甘肃
          { name: '云南', value: [102.709372, 25.046432], itemStyle: { color: '#00EEFF' } }, // 云南
          { name: '广西', value: [108.327537, 22.816659], itemStyle: { color: '#00EEFF' } }, // 广西
          { name: '湖南', value: [112.982951, 28.116007], itemStyle: { color: '#00EEFF' } }, // 湖南
          { name: '山东', value: [117.020725, 36.670201], itemStyle: { color: '#00EEFF' } }, // 山东
          { name: '河南', value: [113.753094, 34.767052], itemStyle: { color: '#00EEFF' } }, // 河南
          { name: '山西', value: [112.578781, 37.813948], itemStyle: { color: '#00EEFF' } }, // 山西
          { name: '福建', value: [119.296194, 26.101082], itemStyle: { color: '#00EEFF' } }, // 福建
          { name: '浙江', value: [120.152575, 30.266619], itemStyle: { color: '#00EEFF' } }, // 浙江
          { name: '江苏', value: [118.763563, 32.061377], itemStyle: { color: '#00EEFF' } }, // 江苏
          { name: '北京', value: [116.407387, 39.904179], itemStyle: { color: '#A6283F' } }, // 北京
          { name: '陕西', value: [108.953939, 34.266611], itemStyle: { color: '#00EEFF' } }, // 陕西
          { name: '广东', value: [113.266887, 23.133306], itemStyle: { color: '#00EEFF' } } // 广东
        ],
        }
    },
    mounted() {
        this.initCharts()
    },
    methods: {
        // -首先初始化地图 对地图进行配置 然后注册地图 最后使用配置
        initCharts() {
            const charts = echarts.init(this.$refs["charts"]);
            const option = {
                // -地图中有两个属性 1.背景颜色 2.geo
                backgroundColor: '#0e2152',
                // -地图配置
                geo: {
                    map: 'china',
                    label: {//-图形上的文本标签
                        normal: {//-通常状态下的样式
                            show: true,
                            textStyle: {
                                color: '#fff'
                            }
                        },
                        emphasis: {//-鼠标放上去的样式
                            textStyle: {
                                color: '#fff'
                            }
                        }
                    },
                    itemStyle: {//-地图区域的样式设置
                        normal: {
                            borderColor: '#5ff',
                            borderWidth: 1,
                            areaColor: {//-地图区域的颜色
                                type: 'radial',//-径向渐变
                                x: 0.5,//-圆心
                                y: 0.5,//-圆心
                                r: 0.8,//-半径  
                                colorStops: [
                                    {//-0% 处的颜色
                                        offset: 0,
                                        color: 'rgba(0,102,154,0)'
                                    },
                                    {//-100% 处的颜色
                                        offset: 1,
                                        color: 'rgba(0,102,154,0)'
                                    }
                                ]
                            }
                        },
                        emphasis: {
                            areaColor: '#2386ad',
                            borderWidth: 1
                        }
                    }
                },
                series: [
                { // 散点系列数据
                        type: 'effectScatter',// 带有涟漪特效动画的散点（气泡）图
                        coordinateSystem: 'geo', //该系列使用的坐标系:地理坐标系
                        // 特效类型,目前只支持涟漪特效'ripple'，意为“涟漪”
                        effectType: 'ripple',
                        // 配置何时显示特效。可选'render'和'emphasis' 。
                        showEffectOn: 'render',
                        rippleEffect: { // 涟漪特效相关配置。
                            period: 10, // 动画的周期，秒数。
                            scale: 4,// 动画中波纹的最大缩放比例。
                            // 波纹的绘制方式，可选 'stroke' 和 'fill'。
                            brushType: 'fill'
                        },
                        zlevel: 1, // 所有图形的 zlevel 值。
                        data: this.points
                    },
                ]
            };
            // -地图注册 第一个参数的名字必须和 option.geo.map一致
            echarts.registerMap('china', china)
            charts.setOption(option);
        },
    },
};
</script>
  
  